<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>新增用户信息</title>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/layer/layer.js"></script>
    <style type="text/css">
        ul li {
            list-style: none;
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>用户名:<input type="text" id="userName" name="userName"/></li>
        <li>真实姓名:<input type="text" id="name" name="name"/></li>
        <li>密码:<input type="text" id="pwd" name="pwd"/></li>
        <li>头像:
            <input type="hidden" id="pic" name="pic"/>
            <img id="userPic" style="height: 50px;width: 50px;border: #00FFFF 1px solid;"/>
            <ul>
                <li>
                    <form id="uploadForm" enctype="multipart/form-data">
                        上传图片:<input id="file" type="file" name="file"/>
                    </form>
                </li>
            </ul>
        </li>
        <li>性别:<input type="text" id="sex" name="sex"/></li>
        <li>手机号:<input type="text" id="phone" name="phone"/></li>
        <li>身份证:<input type="text" id="icNo" name="icNo"/></li>
        <li><input type="button" value="提交" id="btn"/></li>
    </ul>
</div>
</body>
<script>
    $(function () {
        $("#btn").click(function () {
            submit();
        });

        $("#file").change(function () {
            if ($(this).val() != "") {
                uploadFile();
            }
        });
    });

    function uploadFile() {
        var formData = new FormData($('#uploadForm')[0]);
        if (formData === {} || formData === "") {
            alert("请选择文件")
        }
        formData.append("file", formData.get("file"));

        $.ajax({
            type: 'post',
            url: baseUrl + "newFile.json",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.code == "200") {
                    $("#pic").val(data.newPath);
                    $("#userPic").attr("src", tUrl + data.newPath);
                } else {
                    layer.msg("上传失败!", {icon: 5});
                }
            },
            error: (function () {
                alert("上传失败");
            }),
        });
    }


    function submit() {
        var clazz = {
            userName: $("#userName").val(),
            name: $("#name").val(),
            pwd: $("#pwd").val(),
            pic: $("#pic").val(),
            sex: $("#sex").val(),
            phone: $("#phone").val(),
            icNo: $("#icNo").val()
        }
        $.ajax({
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            url: baseUrl + "user/new.json",
            data: JSON.stringify(clazz),
            success: function (data) {
                if (data.code == "200") {
                    window.location.href = "list.html";
                } else {
                    layer.msg("修改失败!", {icon: 5});
                }
            }
        });
    }

</script>
</html>